<template>
  <el-dialog
    :width="800"
    title="订单打印预览"
    :visible="visible"
    @cancel="handleCancel"
    :footer="null"
  >
    <div id="print-tag" class="printCls">
      <div class="printTit">
        <div style="text-align: center">
          <h1>订单详情</h1>
        </div>
      </div>
      <canvas ref="qrCodeCanvas" style="float: right" />
      <div class="summary">
        <div class="col1">地址: {{ pickingForm.address }}</div>
        <div class="col1">联系方式: {{ pickingForm.phone }}</div>
      </div>
      <div class="summary">
        <div class="col1">
          城市: {{ pickingForm.province }}/{{ pickingForm.city }}/{{
            pickingForm.county
          }}
        </div>
        <div class="col1">联系人: {{ pickingForm.consignee }}</div>
      </div>
      <div class="summary">
        <div class="col1">订单金额: {{ pickingForm.actualPrice / 100 }}</div>
        <div class="col1">创建时间: {{ pickingForm.gmtCreate }}</div>
      </div>
      <!-- <table class="common-table">
                <tr>
                    <th>Number</th>
                    <th style="width: 140px">YT No.</th>
                    <th style="width: 140px">Box No.</th>
                    <th style="width: 100px">location</th>
                    <th>SKU</th>
                    <th>Quantity</th>
                    <th>Note</th>
                </tr>
                <tr v-for="(it, index) in pickingForm.details">
                    <td style="text-align: center;">{{ index + 1 }}</td>
                    <td style="text-align: center;">{{ it.boxCode }}</td>
                    <td style="text-align: center;">{{ it.boxCode }}</td>
                    <td style="text-align: center;">{{ it.warehouseName || '' }}<span v-if="it.areaName">{{ '/' +
        it.areaName }}</span></td>
                    <td style="text-align: center;">{{ it.skuCode || '' }}</td>
                    <td style="text-align: center;">{{ it.planQuantity }}</td>
                    <td style="text-align: center;">{{ it.operType }}</td>
                </tr>
            </table> -->
      <div slot="footer" style="text-align: center; padding: 10px 0">
        <el-button type="primary" ghost @click="handleCancel">关闭</el-button>
        <el-button type="primary" @click="handleOk" v-print="printContent"
          >打印</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
import print from "vue-print-nb";
import QRCode from "qrcode";
const columns = [
  {
    title: "序号",
    customRender: (text, record, index) => `${index + 1}`,
    width: 70,
  },
  {
    title: "工序名称",
    dataIndex: "name",
  },
];
export default {
  name: "repairCardPrint",
  directives: { print },
  data() {
    return {
      spinning: false,
      visible: false,
      id: undefined,
      pickingForm: {},
      columns,
      printContent: {
        id: "print-tag",
        // preview: true, // 预览工具是否启用
        // previewTitle: '储能服务费结算单', // 预览页面的标题
        extraCss:
          "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        previewBeforeOpenCallback() {},
        previewOpenCallback() {},
        beforeOpenCallback(vue) {
          vue.printLoading = true;
        },
        openCallback(vue) {
          vue.printLoading = false;
        },
        closeCallback() {},
        clickMounted(vue) {},
      },
      qrUrl: location.href,
    };
  },
  mounted() {},
  methods: {
    handleOk() {
      //
    },
    handleShow(info) {
      console.log("info", info);
      this.visible = true;
      this.pickingForm = { ...info };

      if (info.id) {
        this.id = info.id;
        this.whetherToBind = info.whetherToBind
        this.getQRCode();
      }
    },
    getQRCode() {
      this.$nextTick(() => {
        const canvas = this.$refs.qrCodeCanvas; // 获取canvas DOM元素的引用
        const text = `id=${this.id},whetherToBind=${this.whetherToBind}` // 要生成二维码的文本内容
        const options = {
          // 设置二维码的参数，例如大小、边距等
          width: 100,
          height: 100,
          margin: 2,
        };
        console.log('text', text)
        console.log("canvas", canvas);
        QRCode.toCanvas(canvas, text, options, (error) => {
          if (error) {
            console.error(error);
          } else {
            console.log("QR code generated successfully!");
          }
        });
      });
    },
    handleCancel() {
      this.visible = false;
      this.spinning = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.printCls {
  border: 1px solid #999;

  & > div.printTit {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: flex-start;

    img {
      width: 40px;
      object-fit: contain;
      margin-right: 10px;
    }

    h1 {
      font-size: 22px;
    }

    h1,
    h3 {
      margin-bottom: 0;
    }
  }

  .tableCls {
    border-top: 1px solid #999;

    & > div {
      display: flex;
      align-items: center;

      &.textareaWrap {
        padding: 6px;
        flex-direction: column;
        align-items: flex-start;
      }

      & > div.textareaCls {
        min-height: 120px;
        flex: 1;
      }

      & > div {
        flex: 1;
        display: flex;
        align-items: center;

        & > span {
          flex: 1;
          padding: 6px;
          border: 1px solid #999;
          // border-right: none;
          border-left: none;
        }
      }

      &.printBottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        & > div {
          display: flex;
          align-items: flex-start;
        }
      }
    }
  }
}

.summary {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;

  .col1 {
    width: 50%;
  }
}
</style>
